<template>
  <div class="div" v-if="disabled==false">
    <div>
      <span v-if="type=='password'&&span==''">请输密码：</span>
      <span v-else-if="type=='text'&&span==''">请输文字：</span>
      <span v-else-if="type=='email'&&span==''">请输邮箱：</span>
      <span v-else-if="type=='number'&&span==''">输入数量：</span>
      <span v-else-if="type=='pointNumber'&&span==''">请输数字：</span>
      <span v-else-if="span!=''">{{span}}</span>
      <input :class="message!=''?'danger':'success'" :maxlength="maxLength" :type="type=='password'?'password':'text'"
             :style="{width:width+'px'}"
             :value="value"
             @input="inputChange"
             class="text">&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="message" v-if="validate==true&&messageLocation=='right'">{{message}}</span>
    </div>
    <div>
      <div class="message" v-if="validate==true&&messageLocation=='bottom'">{{message}}</div>
    </div>
  </div>

  <div v-if="type=='password'&&disabled==false" class="div">
    <div>
      <span>确认密码：</span>
      <input :class="message!=''?'danger':'success'" :maxlength="maxLength" type="password"
             :style="{width:width+'px'}"
             v-model="surePassword"
             @input="inputChange2"
             class="text">&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="message" v-if="validate==true&&messageLocation=='right'">{{message2}}</span>
    </div>
    <div>
      <div class="message" v-if="validate==true&&messageLocation=='bottom'">{{message2}}</div>
    </div>
  </div>

  <div class="div" v-if="disabled==true">
    <div>
      <span v-if="type=='password'&&span==''">请输密码：</span>
      <span v-else-if="type=='text'&&span==''">请输文字：</span>
      <span v-else-if="type=='email'&&span==''">请输邮箱：</span>
      <span v-else-if="type=='number'&&span==''">输入数量：</span>
      <span v-else-if="type=='pointNumber'&&span==''">请输数字：</span>
      <span v-else-if="span!=''">{{span}}</span>
      <input disabled="disabled" :class="message!=''?'danger':'success'" :maxlength="maxLength"
             :type="type=='password'?'password':'text'"
             :style="{width:width+'px'}"
             :value="value"
             @input="inputChange"
             class="text">&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="message" v-if="validate==true&&messageLocation=='right'">{{message}}</span>
    </div>
    <div>
      <div class="message" v-if="validate==true&&messageLocation=='bottom'">{{message}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      customValidate: {
        type: Function,
      },
      span: {
        type: String,
        default: ""
      },
      width: {
        type: String,
        default: "150"
      },
      value: {
        type: String,
        required: true
      },
      flag: {
        type: Boolean,
        default: false,
      },
      validate: {
        type: Boolean,
        default: true
      },
      messageLocation: {
        type: String,
        default: "bottom"
      },
      maxLength: {
        type: String,
        default: ""
      },
      validateLength: {
        type: String,
        default: ""
      },
      type: {
        type: String,
        default: "text"
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        surePassword: '',
        message: '',
        message2: '',
        flag2: false,
        flag1: this.flag
      }
    },
    methods: {
      inputChange(event) {
        this.$emit('update:value', event.target.value);
        if (this.validate == true) {
          this.flag1 = true;
          this.message = "";
          if (this.customValidate == undefined) {
            if (this.type == 'number') {
              var numValidate = /^\d+$/.test(event.target.value);
              if (!numValidate) {
                this.flag1 = false;
                this.message = "只能输入整数!";
              } else {
                this.flag1 = true;
                this.message = "";
              }
            } else if (this.type == 'pointNumber') {
              var numValidate2 = /^(-?\d+)(\.\d+)?$/.test(event.target.value);
              if (!numValidate2) {
                this.flag1 = false;
                this.message = "只能输入整数或小数!";
              } else {
                this.flag1 = true;
                this.message = "";
              }
            } else if (this.type == 'email') {
              var emailValidate = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(event.target.value);
              if (!emailValidate) {
                this.flag1 = false;
                this.message = "邮箱格式不正确!";
              } else {
                this.flag1 = true;
                this.message = "";
              }
            }
            if (this.flag1 && this.validateLength != '' && event.target.value.length < this.validateLength) {
              this.flag1 = false;
              this.message = "长度不能小于" + this.validateLength + "位!";
            }
            if (this.type != 'password')
              this.$emit('update:flag', this.flag1);
            else {
              this.inputChange3(event.target.value);
            }
          } else {
            if (this.flag1 && this.validateLength != '' && event.target.value.length < this.validateLength) {
              this.flag1 = false;
              this.message = "长度不能小于" + this.validateLength + "位!";
            }
            var obj = {};
            obj = this.customValidate(event.target.value);
            this.flag1 = obj.flag;
            this.message = obj.message;
            if (this.type != 'password'){
              this.$emit('update:flag', this.flag1);
            }
            else {
              this.inputChange3(event.target.value);
            }
          }
        }
      },

      inputChange2() {
        if (this.validate == true) {
          this.flag2 = true;
          this.message2 = "";
          if (this.value != this.surePassword) {
            this.flag2 = false;
            this.message2 = "两次密码不一致!"
          }
          this.$emit('update:flag', this.flag1 && this.flag2)
        }
      },

      inputChange3(value) {
        if (this.validate == true) {
          this.flag2 = true;
          this.message2 = "";
          if (value != this.surePassword) {
            this.flag2 = false;
            this.message2 = "两次密码不一致!"
          }
          this.$emit('update:flag', this.flag1 && this.flag2)
        }
      }
    },
  }
</script>

<style scoped>
  .danger {
    border: 1px solid red;
  }

  .success {
    border: 0;
  }

  .message {
    padding: 5px;
    color: orangered;
  }

  .div {
    padding: 5px;
    -webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
    transition: transform 1s;

    -webkit-filter: drop-shadow(0 0 3px #EEBF23);
    filter: drop-shadow(0 0 3px #EEBF23);
  }

  .div:hover {
    -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
    transform: rotate(-5deg);

    -webkit-filter: drop-shadow(0 0 3px #87CEEB);
    filter: drop-shadow(0 0 3px #87CEEB);
  }

  .text {
    text-align: center;
    color: #E9967A;
    border-radius: 5px;
    background-image: linear-gradient(to bottom, rgb(255 241 241), rgb(255 255 255), rgb(251 240 222));
    height: 25px;
  }

  .text:hover {
    color: black;
  }
</style>
